<template>
    <a-layout class="app">
        <a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible width="200" theme="light" class="sidebar">
            <div class="sidebar-header" :class="{ collapsed }">
                <img v-if="!collapsed" src="/logo.png" alt="Logo" class="logo" />
                <img v-else src="/logo-icon.png" alt="Logo Icon" class="logo-icon" />
            </div>
            <a-menu
                v-model:selectedKeys="selectedKeys"
                mode="inline"
                theme="light"
                @click="handleMenuClick"
                :inline-collapsed="collapsed"
                class="sidebar-menu"
            >
                <a-menu-item key="main">
                    <template #icon>
                        <HomeOutlined class="menu-icon" />
                    </template>
                    <span class="menu-text">{{ $t('home') }}</span>
                </a-menu-item>
                <a-menu-item key="market">
                    <template #icon>
                        <ShopOutlined class="menu-icon" />
                    </template>
                    <span class="menu-text">{{ $t('market') }}</span>
                </a-menu-item>
                <a-menu-item key="furnace">
                    <template #icon>
                        <FireOutlined class="menu-icon" />
                    </template>
                    <span class="menu-text">{{ $t('transform') }}</span>
                </a-menu-item>
                <a-menu-item key="exchange">
                    <template #icon>
                        <SwapOutlined class="menu-icon" />
                    </template>
                    <span class="menu-text">{{ $t('exchange') }}</span>
                </a-menu-item>
                <a-menu-item key="collection">
                    <template #icon>
                        <BookOutlined class="menu-icon" />
                    </template>
                    <span class="menu-text">{{ $t('collection') }}</span>
                </a-menu-item>
                <a-menu-item key="logs">
                    <template #icon>
                        <HistoryOutlined class="menu-icon" />
                    </template>
                    <span class="menu-text">{{ $t('logs') }}</span>
                </a-menu-item>
            </a-menu>
            <div class="sidebar-footer">
                <a-button type="text" @click="showSaveDrawer" class="footer-button">
                    <SettingOutlined class="footer-icon" />
                    <span v-if="!collapsed" class="footer-text">{{ $t('saveManagement') }}</span>
                </a-button>
            </div>
        </a-layout-sider>
        <a-layout>
            <a-layout-header style="background: #fff; padding: 0;">
                <a-button type="text" @click="collapsed = !collapsed" style="margin-left: 10px;">
                    <MenuOutlined v-if="!collapsed" />
                    <MenuFoldOutlined v-if="collapsed" />
                </a-button>
                <a-select v-model:value="locale" style="width: 120px; float: right; margin: 16px">
                    <a-select-option value="zh-CN">简体中文</a-select-option>
                    <a-select-option value="zh-TW">繁體中文</a-select-option>
                    <a-select-option value="en">English</a-select-option>
                    <a-select-option value="ja">日本語</a-select-option>
                </a-select>
            </a-layout-header>
            <a-layout-content style="padding: 24px">
                <component :is="currentViewComponent" />
            </a-layout-content>
        </a-layout>
        <a-drawer
            :title="$t('saveManagement')"
            placement="right"
            :visible="drawerVisible"
            @close="drawerVisible = false"
            width="400"
        >
            <a-space direction="vertical" :size="16">
                <a-button type="primary" block @click="exportSaveData">{{ $t('exportSave') }}</a-button>
                <a-upload :before-upload="handleImportFile" accept=".json" :show-upload-list="false">
                    <a-button type="primary" block>{{ $t('importSave') }}</a-button>
                </a-upload>
            </a-space>
        </a-drawer>
    </a-layout>
</template>

<script setup>
import { computed, ref, watch } from 'vue'
import {
    BookOutlined,
    FireOutlined,
    HistoryOutlined,
    HomeOutlined,
    MenuFoldOutlined,
    MenuOutlined,
    SettingOutlined,
    ShopOutlined,
    SwapOutlined
} from '@ant-design/icons-vue'
import MainView from './components/MainView.vue'
import MarketView from './components/MarketView.vue'
import FurnaceView from './components/FurnaceView.vue'
import ExchangeView from './components/ExchangeView.vue'
import CollectionView from './components/CollectionView.vue'
import LogView from './components/LogView.vue'
import { useGameStore } from './stores/game'
import { message } from 'ant-design-vue'
import { useI18n } from 'vue-i18n'

const i18n = useI18n()
const locale = ref(i18n.locale.value)

const collapsed = ref(true)
const selectedKeys = ref(['main'])
const currentView = ref('main')
const drawerVisible = ref(false)

const gameStore = useGameStore()

const currentViewComponent = computed(() => ({
    main: MainView,
    market: MarketView,
    furnace: FurnaceView,
    exchange: ExchangeView,
    collection: CollectionView,
    logs: LogView
}[currentView.value]))

const handleMenuClick = ({ key }) => {
    currentView.value = key
    selectedKeys.value = [key]
}

const showSaveDrawer = () => {
    drawerVisible.value = true
}

const exportSaveData = () => {
    const dataStr = gameStore.exportData()
    const blob = new Blob([dataStr], { type: 'application/json' })
    const url = window.URL.createObjectURL(blob)
    const link = document.createElement('a')
    link.href = url
    link.download = `game_save_${new Date().toISOString()}.json`
    link.click()
    window.URL.revokeObjectURL(url)
    message.success(i18n.t('exportSuccess'))
    drawerVisible.value = false
}

const handleImportFile = (file) => {
    const reader = new FileReader()
    reader.onload = (e) => {
        try {
            const data = e.target.result
            gameStore.importData(data)
            message.success(i18n.t('importSuccess'))
            drawerVisible.value = false
        } catch (error) {
            message.error(i18n.t('importFailed'))
        }
    }
    reader.readAsText(file)
    return false
}

watch(locale, (newVal) => {
    i18n.locale.value = newVal
})
</script>

<style scoped>
.app {
    min-height: 100vh;
}

.sidebar {
    background: linear-gradient(180deg, #ffffff 0%, #f9fafb 100%);
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
    transition: width 0.3s ease;
}

.sidebar-header {
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    border-bottom: 1px solid #e8ecef;
}

.logo {
    height: 40px;
    transition: opacity 0.3s ease;
}

.logo-icon {
    height: 32px;
    transition: opacity 0.3s ease;
}

.sidebar-header.collapsed .logo {
    display: none;
}

.sidebar-menu {
    border-right: none;
    background: transparent;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

:deep(.ant-menu-item) {
    padding: 0 16px !important;
    border-radius: 4px;
    height: 40px;
    display: flex;
    align-items: center;
    transition: all 0.2s ease;
    margin: 5px;
}

:deep(.ant-menu-item .anticon) {
    font-size: 20px;
    margin-right: 12px;
    transition: font-size 0.2s ease;
}

:deep(.ant-menu-item .menu-text) {
    font-size: 14px;
    font-weight: 500;
}

:deep(.ant-menu-item:hover) {
    background-color: #f0f5ff !important;
    color: #1677ff !important;
}

:deep(.ant-menu-item-selected) {
    background-color: #e6f4ff !important;
    color: #1677ff !important;
}

:deep(.ant-menu-item-selected .anticon) {
    color: #1677ff;
}

:deep(.ant-menu-inline-collapsed .ant-menu-item)  {
    margin: 0;
    display: flex;
    align-items: center;
    flex-direction: column;
}
ul.ant-menu.ant-menu-inline-collapsed{
    display: flex;
    align-items: center;
    flex-direction: column;
}

:deep(.ant-menu-inline-collapsed .ant-menu-item) {
    justify-content: center;
    padding: 0 !important;
    margin: 5px;
    width: 40px;
}

:deep(.ant-menu-inline-collapsed .ant-menu-item .anticon) {
    margin-right: 0;
    font-size: 20px; /* Reduced from 24px to fit */
}

:deep(.ant-menu-inline-collapsed .ant-menu-item .menu-text) {
    display: none;
}

.sidebar-footer {
    position: absolute;
    bottom: 16px;
    width: 100%;
    padding: 0 12px;
    text-align: center;
}

.footer-button {
    width: 100%;
    height: 48px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 16px;
    transition: background-color 0.2s ease;
}

.footer-button:hover {
    background-color: #f0f5ff;
    color: #1677ff;
}

.footer-icon {
    font-size: 20px;
    margin-right: 12px;
}

.footer-text {
    font-size: 14px;
    font-weight: 500;
}

:deep(.ant-menu-inline-collapsed .footer-button) {
    justify-content: center;
    padding: 0;
    width: 48px;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
}

:deep(.ant-menu-inline-collapsed .footer-icon) {
    margin-right: 0;
    font-size: 20px; /* Reduced from 24px to fit */
}

:deep(.ant-menu-inline-collapsed .footer-text) {
    display: none;
}
</style>